<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* .a{
        width: 300px;
        height: 300px;
        border: solid 2px;

    }
    .b{
        width: 100px;
        height: 100px;
        border: solid 2px;
        
    } */
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body {
      position: relative;
      width: 100%;
      height: 100vh;
      z-index: -4;
      z-index: -4;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    body::before {
      content: "";
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background-color: #9c88ff;
      z-index: -4;
      top: -50px;
      left: -90px;
    }
    body::after {
      content: "";
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background-color: #f9ca24;
      z-index: -4;
      bottom: -120px;
      right: -180px;
    }
    .main {
      width: 1200px;
      height: 600px;
      background: rgba(250, 81, 75, 0.5);
      backdrop-filter: blur(5px);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      box-shadow: 0 0 20px #ff9ff3;
      border-top: 1px solid #fff;
      border-left: 1px solid #fff;
    }
    .main .out {
      display: block;
      width: 400px;
      height: 40px;
      font-size: 25px;
      background: none;
      outline: none;
      box-shadow: 0 0 10px #cd84f1;
    }
    .main .out option {
      background: #f368e0;
    }
    .main .out:nth-child(1) {
      margin-right: 40px;
    }
  </style>
  <body>
    <div id="app">
      <!-- <div v-for="item of inn">{{item}}</div> -->

      <!-- <div v-for="item of dss">{{item.citys}}
            <div v-for="items of item.citys">{{items.ds}}{{items.ad}}{{items.bh}}</div>
        </div> -->
      <!-- <div @click="fun($event)" class="a">外
            <div @click="fun($event)" class="b">
                内
            </div>
        </div> -->
      <div class="main">
        <select @change="func($event)" class="out">
          <option v-for="item of dss" :value="item.name">{{item.name}}</option>
        </select>
        <select class="out">
          <option v-for="xx of ind" :value="xx.cityName">{{xx.cityName}}</option>
        </select>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            dss: [
              { name: "请选择城市" },
              {
                name: "中国",
                age: 445,
                qq: 4545,
                citys: [
                  { cityName: "河南" },
                  { cityName: "北京" },
                  { cityName: "广东" },
                ],
              },
              {
                name: "USA",
                age: 445,
                qq: 4545,
                citys: [
                  { cityName: "天台" },
                  { cityName: "地板" },
                  { cityName: "楼梯" },
                ],
              },
              {
                name: "Japan",
                age: 445,
                qq: 4545,
                citys: [
                  { cityName: "富士山" },
                  { cityName: "冲绳" },
                  { cityName: "光之国" },
                ],
              },
            ],
            ind: null,
          };
        },
        methods: {
          func(e) {
            for (let i = 0; i < this.dss.length; i++) {
              if (this.dss[i].name == e.target.value) {
                this.ind = this.dss[i].citys;
              }
              console.log(e);
            }
          },
        },
      });
    </script>
  </body>
</html>
